<template>
  <com-card>
    <div slot="com_title">订单详情</div>
    <div slot="com_content">
     <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border :model="formObj">
  <el-descriptions-item label="订单号">{{formObj.orderNo}}</el-descriptions-item>
  <el-descriptions-item label="下单时间：">{{formObj.orderTime}}</el-descriptions-item>
  <el-descriptions-item label="手机号：" :span="2">{{formObj.phone}}</el-descriptions-item>
  <el-descriptions-item label="收货人：" >{{formObj.consignee}}</el-descriptions-item>
  <el-descriptions-item label="送货地址：" >{{formObj.deliverAddress}}</el-descriptions-item>
  <el-descriptions-item label="送达时间：" >{{formObj.deliveryTime}}</el-descriptions-item>
  <el-descriptions-item label="用户备注">{{formObj.remarks}}</el-descriptions-item>
  <el-descriptions-item label="订单金额">{{formObj.orderAmount}}</el-descriptions-item>
  <el-descriptions-item label="订单状态">
    <el-tag size="small">{{formObj.orderState}}</el-tag>
  </el-descriptions-item>
</el-descriptions>
  <el-button type="primary" @click="rut">返回</el-button>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/comCard";
import { api_queryOne } from "../../api/order";
export default {
  components: {
    ComCard,
  },
  data() {
    return {
      formObj: {
        data: "",
        id: "",
        orderNo: "",
        orderTime: "",
        phone: "",
        consignee: "",
        deliverAddress: "",
        deliveryTime: "",
        remarks: "",
        orderAmount: "",
        orderState: "",
      },
    };
  },
  mounted() {
    this.queryOne();
  },
  methods: {
    async queryOne() {
      // 根据id获取订单详情的方法
      // 拿到订单列表传递过来的id值
      let rst = await api_queryOne({ id: this.$route.query.id });
      this.formObj = rst.data;
      console.log(rst);
    },
    rut(){
        this.$router.push("/order/list")
    }
  },
};
</script>

<style lang="less" scoped></style>
